<template>
	<view class="flex-col page">
		<u-navbar title="激活用户" title-color="#1f1f1f" back-icon-color="#1f1f1f" :background="background"></u-navbar>

		<view class="flex-col group">
			<view class="flex-col">
				<view class="flex-col section_2">
					<view class="flex-col">
						<view class="flex-row justify-between items-center self-stretch group_2">
							<view class="flex-row items-center">
								<image class="shrink-0 image_3"
									src="https://heigeng.axu9.com/images/jh-mobile-icon.png" />
								<input type="text" :disabled="disabledMobile" v-model="mobile" placeholder="请输入手机号"
									placeholder-class="font_2 text_3" class="ml-14-5" />
							</view>
							<text v-if="rechargeType == 1 " @click="getName" class="font text_2">查询</text>
						</view>
						<view class="self-center divider"></view>
					</view>
					<view class="mt-24 flex-col">
						<view class="flex-row items-center self-stretch group_3">
							<image class="image_4" src="https://heigeng.axu9.com/images/jh-shop-icon.png" />
							<!-- <text class="font_2 ml-15-5">商家名称</text> -->
							<input type="text" v-model="purchaserValue" placeholder="商家名称" disabled
								placeholder-class="font_2 " class="font_22 ml-15-5" />
						</view>
						<view class="self-center divider"></view>
					</view>
				</view>
				<view class="" v-if="rechargeType == 1 ">
					<view class="flex-row items-center group_4">
						<view class="section_3"></view>
						<text class="font_3 ml-9-5">积分充值</text>
					</view>
					<view class="flex-col section_4">
						<view class="flex-row justify-between items-center group_5">
							<view class="flex-row items-center">
								<image class="shrink-0 image_5" src="https://heigeng.axu9.com/images/czjf-icon.png" />
								<input @blur="integralBlur" type="number" v-model="integralValue" placeholder="充值积分" :disabled="isDisabled"
									placeholder-class="font_3 text_4" class="ml-14-5" />
							</view>
							<!-- <text class="font text_5">充值</text> -->
						</view>
						<view class="group_6"></view>
					</view>
				</view>
				
			</view>
			<view class="flex-col group_7">
				<view class="flex-row items-center group_8">
					<view class="section_3"></view>
					<text class="font_3 ml-9-5">套餐充值</text>
				</view>
				<view class="flex-row justify-start items-center section_5">
					<view class="flex-col taocan-item items-center justify-center"
						:class="current == index ? 'taocan-item-active' : 'taocan-item-unactive'"
						@click="changeTaocan(index)" v-for="(item,index) in taocanList" :key="index">
						<view class="tc-title">
							{{item.title}}
						</view>
						<view class="tc-price">
							{{item.price}}
						</view>
						<view class="tc-desc">
							激活点数
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flex-row justify-center">
			<view v-if="!isLoading" @click="activePur" class="text-wrapper_2"><text class="">立即激活</text></view>
			<view v-else class="text-wrapper_2"><text class="">立即激活</text></view>
		</view>

		
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import { getPackage,getUsername,activationBusiness } from "@/api/user.js"
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				mobile: '', //手机号
				purchaserValue: '', //商家名称
				integralValue: '', //充值积分
				isDisabled: false, //true禁用积分充值 false不禁用
				taocanList: [{
						title: '月卡',
						price: 0
					},
					{
						title: '季卡',
						price: 0
					},
					{
						title: '年卡',
						price: 0
					}
				],
				current: -1, //选中套餐下标
				jhUid: '',//激活的uid
				type: 1,//1添积分 2激活卡
				rechargeType: 1,//1激活商家  2用户续费
				disabledMobile: false,//电话是否禁用
				isLoading: false,//防止重复点击
				commonData: {}
			}
		},
		onLoad(options) {
			this.commonData = commonData;
			console.log(options,'激活商家')
			this.rechargeType = options.type ? options.type : 1;
			this.jhUid = options.jhUid  ? options.jhUid : '';
			this.mobile = options.mobile ? options.mobile : '';
			this.disabledMobile = options.type == 2 ? true : false;
			this.getTaocan();
			if(this.rechargeType == 2){
				this.getName();
			}
			
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			
			// 积分输入框失焦
			integralBlur(e){
				console.log(e.detail.value,'blur')
				let value = e.detail.value
				if(value != ''){
					this.current = -1;
				}
			},
			// 手机号查询名称
			getName(){
				if(this.mobile == ''){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				}
				getUsername({
					mobile: this.mobile
				}).then(res => {
					console.log(res,'getUsername')
					if(res.errno == 0){
						this.purchaserValue = res.data.nickName;
						this.jhUid = res.data.id;
					}else {
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取代理商套餐积分
			getTaocan(){
				getPackage().then(res => {
					console.log(res,'ffffff');
					if(res.errno == 0){
						let info = res.data;
						this.taocanList[0].price = info.yue;
						this.taocanList[1].price = info.ji;
						this.taocanList[2].price = info.nian;
					}
					
				}).catch(err => {
					
				})
			},
			changeTaocan(index) {
				this.integralValue = ''
				this.current = index;
			},
			activePur() {
				console.log(this.current,'this.current')
				// this.popupActive = true;
				if(this.purchaserValue == ''){
					uni.showToast({
						title: '商家名称不能为空',
						icon: 'none'
					})
					return
				}
				if(this.integralValue == '' && this.current == -1){
					uni.showToast({
						title: '充值积分不能为空',
						icon: 'none'
					})
					return
				}
			
				if(this.integralValue != ''){
					this.type = 1;//添积分
					// json.type = this.type;
					// json.num = this.integralValue;
					// json.k_type = '';
				}else if(this.current != -1){
					this.type = 2;//激活卡
				}
				// console.log(this.type,this.jhUid,this.integralValue,this.current+1)
				// console.log(this.taocanList[this.current].price,'kkkkk')
				// return
				uni.showLoading({
					title: '加载中'
				})
				this.isLoading = true;
				// 代理商激活商家
				activationBusiness({
					uid: uni.getStorageSync("userId"),
					type: this.type,
					jh_uid: this.jhUid,
					num: this.type == 1 ? this.integralValue : this.taocanList[this.current].price,
					k_type: this.type == 2 ? this.current+1 : ''
				}).then(res =>{
					
					console.log(res,'代理商激活商家')
					if(res.errno == 0){
						uni.showToast({
							title: '成功',
							icon: 'none'
						})
						setTimeout(()=>{
							this.isLoading = false;
							uni.hideLoading();
							uni.redirectTo({
								url: '/pagesMine/purchaser/index'
							})	
						},1000)
						
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.isLoading = false;
						uni.hideLoading();
					}
				}).catch(err => {
					this.isLoading = false;
					uni.hideLoading();
				})

			},
			// openCardType() {
			// 	this.cardTypeShow = true;
			// },
			// typeConfirm(e) {
			// 	console.log(e, 'typeConfirm')
			// 	let index = e[0];
			// 	this.cardType = this.cardTypeList[index].cateName;

			// },
			create(){
				this.popupActive = false;
			},
			// cancelPop(){
			// 	this.popupActive = false;
			// }
		}
	}
</script>
<style>
	@import url(../../static/css/common.css);
	page {
		background-size: 100% 433rpx;
		/* background-image: linear-gradient(181deg, #d6f4ed 0%, #f5f5f5 100%); */
		background-image: linear-gradient(181deg, #d6f4ed 0%, #ebfaf6 100%);
		background-repeat: no-repeat;
		background-color: #f5f5f5;
	}
</style>
<style>
	

	.ml-15-5 {
		margin-left: 31rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.ml-14-5 {
		margin-left: 29rpx;
	}

	.ml-2-5 {
		margin-left: 5rpx;
	}

	

	.page {
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}


	.group {
		padding: 0 30rpx 180rpx 30rpx;
	}

	.section_2 {
		padding: 60rpx 40rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.group_2 {
		padding-bottom: 29rpx;
	}

	.image_3 {
		width: 30rpx;
		height: 34rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #98a0a9;
	}
	.font_22 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #98a0a9;
		width: 80%;
	}

	.text_3 {
		line-height: 29rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #00bf90;
	}

	.text_2 {
		margin-right: 49rpx;
	}

	.divider {
		opacity: 0.2;
		width: 530rpx;
		height: 1rpx;
		background-color: #536074;
	}

	.group_3 {
		padding-bottom: 38rpx;
	}

	.image_4 {
		width: 31rpx;
		height: 31rpx;
	}

	.group_4 {
		padding: 37rpx 0 28rpx;
	}

	.section_3 {
		background-color: #00bf90;
		border-radius: 3rpx;
		width: 6rpx;
		height: 36rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #111111;
	}

	.section_4 {
		padding: 0 41rpx 22rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.group_5 {
		padding: 51rpx 0 29rpx;
	}

	.image_5 {
		width: 29rpx;
		height: 36rpx;
	}

	.text_4 {
		color: #98a0a9;
	}

	.text_5 {
		margin-right: 50rpx;
	}

	.group_6 {
		margin: 0 40rpx;
		opacity: 0.2;
		height: 1rpx;
		background-color: #536074;
	}

	.group_7 {
		margin-top: 42rpx;
	}

	.group_8 {
		padding-bottom: 32rpx;
	}

	.section_5 {

		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow-x: scroll;
	}

	.text-wrapper_2 {
		width: 670rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
		box-shadow: 0rpx 22rpx 50rpx #00bf903b;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
	}


	.taocan-item {
		margin-right: 20rpx;
	}

	.taocan-item:last-child {
		margin-right: 0;
	}

	.taocan-item-active {
		width: 250rpx;
		height: 298rpx;
		background-image: url('https://heigeng.axu9.com/images/jh-taocan-active2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #fff;
	}

	.taocan-item-unactive {
		width: 250rpx;
		height: 298rpx;
		background-image: url('https://heigeng.axu9.com/images/jh-taocan.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #333;
	}

	.taocan-item-unactive .tc-title {
		font-size: 44rpx;
		text-align: center;
		font-weight: 400;
		color: #666467;
	}

	.taocan-item-unactive .tc-desc {
		font-size: 30rpx;
		text-align: center;
		font-weight: 400;
		color: #666467;
	}

	.taocan-item-unactive .tc-price {
		font-size: 44rpx;
		text-align: center;
		font-weight: 400;
		color: #222222;
	}

	.tc-title {
		font-size: 44rpx;
		text-align: center;
		font-weight: 400;
	}

	.tc-price {
		font-size: 44rpx;
		text-align: center;
		font-weight: 400;
		margin-bottom: 38rpx;
		margin-top: 48rpx;
	}

	.tc-desc {
		font-weight: 500;
		font-size: 30rpx;
		text-align: center;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #f5f5f5;
		width: 100%;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	
</style>